<template>
	<div class="container" @click="handleGallary">
		<div class="wrapper">
			<swiper  ref="mySwiper" :options="swiperOptions" >
				<swiper-slide v-for="(item,index) in imgs" :key="index">
					<img class="gallary-img" :src="item" alt="">
				</swiper-slide>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination" slot="pagination" ></div>
			 </swiper>
		</div>
	</div>
</template>l

<script>
	export default{
		props:{
			imgs:{
				type:Array,
				default(){
					return[]
				}
			}
		},
		data(){
			return {
				swiperOptions:{
					loop:true,  //轮播图可以全部循环
					pagination:'.swiper-pagination',
					paginationType:'fraction',
					observer:true,
					observeParents:true,
				}
			}
		},
		methods:{
			handleGallary(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.container >>> .swiper-container
		overflow inherit
	.container
		z-index 11
		display flex
		position fixed
		flex-direction column
		justify-content center
		top 0
		left 0
		right 0
		bottom 0
		background-color black
		.wrapper
			// overflow hidden
			width 100%
			// background-color red
			.gallary-img
				width 100%
				height 6rem
			.swiper-pagination
				color #fff
				font-size 0.3rem
				bottom -3.3rem
</style>
